<template>
    <div class="productProNew">
        <div class="title"><h1><span>添加</span></h1></div>
        <form name="newContent" class="basicInfor">
            <div class="form-group required">
              <div class="form-group required">
                <label :for="'guiderPhone'+$attrs.text">导游电话：</label>
                <input autocomplete="off" type="number" min="1" class="form-control proName" :id="'guiderPhone'+$attrs.text" placeholder="请输入电话" v-model="guideradds.phone" @blur="getPhone(guideradds.phone)"/>
              </div>
                <label :for="'guiderName'+$attrs.text">姓名：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'guiderName'+$attrs.text" placeholder="请输入姓名" required v-model="guideradds.name" />
            </div>
            <div class="form-group required">
              <label class="destxt" :for="'gender'+$attrs.text">性别：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'gender'+$attrs.text" placeholder="请输入性别" required v-model="guideradds.gender" />
            </div>
            <div class="form-group required">
              <label class="destxt" :for="'rank'+$attrs.text">等级：</label>
              <input autocomplete="off" type="number" min="1" max="5" class="form-control proName" :id="'rank'+$attrs.text" placeholder="请输入等级" required v-model="guideradds.rank" />
              <span class="g-tips">（请填写1~5之间的整数）</span>
            </div>
            <div class="form-group">
              <label class="destxt" :for="'uid'+$attrs.text">身份证编号：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'uid'+$attrs.text" placeholder="请输入身份证编号" required v-model="guideradds.uid">
            </div>
            <div class="form-group">
              <label class="destxt" :for="'passportno'+$attrs.text">护照编号：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'passportno'+$attrs.text" placeholder="请输入护照编号" required v-model="guideradds.passportno">
            </div>
            <div class="form-group">
              <label class="destxt" :for="'guiderno'+$attrs.text">导游编号：</label>
              <input autocomplete="off" type="text" class="form-control proName" :id="'guiderno'+$attrs.text" placeholder="请输入导游编号" required v-model="guideradds.guiderno">
            </div>
            <div class="form-group">
                <label class="destxt" :for="'remark'+$attrs.text">备注：</label>
                <textarea class="form-control proDes" :id="'remark'+$attrs.text" rows="6" placeholder="请输入备注信息" v-model="guideradds.remarks"></textarea>
            </div>
            <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">提交</button>
        </form>
    </div>
</template>
<script>
    export default {
      data(){
        return{
          Http:'',
          guideradds:{
            name:'',
            phone:'',
            gender: '',
            rank: '',
            tuanTotal: 0,
            uid: '',
            passportno: '',
            guiderno: '',
            remarks: '',
            searchPhoneHttp: ''
          }
        }
      },
      computed:{
        guiderAdd(){//
          return this.$store.state.interface.addGuider;
        },
        searchPhone(){
          return this.$store.state.interface.searchPhone
        }
      },
      components:{},
      methods:{
        getPhone (phone) {
          let self = this;
          let isMobile = /^(13|14|15|17|18)\d{9}$/;
          if (!isMobile.test(phone)) {
            layer.msg('请填写有效手机号！');
            return false
          }
          let formData = new FormData();
          let isId = 1;
          formData.append('mobilePhone', phone);
          formData.append('isId', isId);
          self.$ajax.post(self.searchPhoneHttp, formData).then(function(res) {
            if (res.data.code === '10000') {
              let result = res.data.result;
              let id = result.customer.id || ''
              if (id) {
                self.guideradds.name = result.customer.name || '';
                self.guideradds.gender = result.customer.gender || '';
              }
            }
          })
        },
        submitPro(){ //提交判断是否信息完整
          let self = this;
          let isMobile = /^(13|14|15|17|18)\d{9}$/;
          if (self.guideradds.name === '') {
            layer.msg('请填写姓名！');
            return false
          }
          if (self.guideradds.phone === '') {
            layer.msg('请填写导游电话！');
            return false
          }
          if (!isMobile.test(self.guideradds.phone)) {
            layer.msg('请填写有效手机号！');
            return false
          }
          if (self.guideradds.gender === '') {
            layer.msg('请填写性别！');
            return false
          }
          if (self.guideradds.rank === '') {
            layer.msg('请填写等级！');
            return false
          }
          if (isNaN(self.guideradds.rank * 1)) {
            layer.msg('等级应为1~5的数字！');
            return false
          }
          if(parseInt(self.guideradds.rank) !== self.guideradds.rank*1){
            layer.msg('等级请填写整数！');
            return false
          }

          let formData =new FormData(); // 基础信息表单数据
          formData.append('name', self.guideradds.name);
          formData.append('mobile', self.guideradds.phone);
          formData.append('gender', self.guideradds.gender);
          formData.append('rank', self.guideradds.rank);
          formData.append('tuanTotal', self.guideradds.tuanTotal);
          formData.append('idSn', self.guideradds.uid);
          formData.append('guideSn', self.guideradds.guiderno);
          formData.append('passportSn', self.guideradds.passportno);
          formData.append('area', 'ss');
          formData.append('demo', self.guideradds.remarks);

          self.$ajax.post(self.Http,formData).then(function(res) {
            let result = res.data.result || '';
            if(res.data.code === '10000' && result.WbGuide){
              layer.msg('添加成功！');
              self.guideradds = {};
            }else{
              self.codes(res.data.code);
              layer.msg('添加失败！');
            }
          },function(res) {
            layer.msg('添加失败！');
          });
        }
      },
      beforeMount(){
        let self = this;
        let url = self.guiderAdd;
        let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
        self.Http =`${url}?sid=${sessionId}`;
        self.searchPhoneHttp = `${self.searchPhone}?sid=${sessionId}`;
      },
      mounted(){}
    }
</script>
<style lang="scss" scoped>
    form{
        display:block;
    }
    .title{
        color:#4e5e7e;
    }
  .form-control.like-textarea, .form-control.proDes, .form-group .mainImg{
    width: 70%;
  }
  .g-tips{margin-left:10px;color:#999;}
</style>
